<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .router-link-active{
            color: #fff;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>这是头部，他不会变</div>
        <ul>
            <li><a href="#/index">首页</a></li>
            <li><a href="#/login">登录</a></li>
            <li><a href="#/detail">详情</a></li>
        </ul>

        <ul>
            <!-- <li><router-link to="/index?a=1&b=3">首页</router-link></li> -->
            <li><router-link :to="{name: 'home', query: {a: 1, b: 3}}">首页</router-link></li>
            <li><router-link to="/login">登录</router-link></li>
            <li><router-link to="/detail">详情</router-link></li>
        </ul>
        <router-view></router-view>
        <div>这是底部，他也不会变</div>
        
    </div>

    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        //路由： 根据不同的hash值，为页面对应显示不同的组件

        //路由规则： hash值是如何和组件对应的

        //vue-router的使用 （关键步骤）：
        //1. 制定路由规则
        //2. 指定显示的位置

        

        // 安装
        // npm i vue-router


        // 详细的使用步骤
        // 1. 引入vue-router的文件
        // 2. 先创建组件模板
        // 3. 创建路由对象
        // 4. 要将路由对象和vm实例关联起来
        // 5. 给路由匹配到的组件指定显示的位置 <router-view> 指的就是组件的占位符
        
        
        let Index = {
            template: '<div>这是首页的内容</div>'
        } 

        let Login = {
            template : '<div>这是登录页的内容</div>'
        }

        let Detail = {
            template : '<div>这是详情页的内容</div>'
        }

        let router = new VueRouter({
            //路由规则
            routes: [
                {
                    name: "home",
                    path: "/index",
                    component: Index
                },
                {
                    path: "/login",
                    component: Login
                },
                {
                    path: "/detail",
                    component: Detail
                },
                {
                    path: "/",
                    // redirect就是将网页重新跳转到对应的地址！
                    redirect: "/index"
                }
            ],
            // linkActiveClass: 'now'
        });


        let vm = new Vue({
            el: "#app",
            data: {
            },
            router
        })
    </script>
</body>

</html>